<template>
  <el-dialog
    :title="title"
    :visible.sync="showCreateUpdateDialog"
    fullscreen
    :close-on-press-escape="false"
    :show-close="false"
  >
    <div class="createUpdateDialog-box">
      <el-form
        :inline="true"
        label-width="130px"
        size="mini"
        label-suffix=":"
        :model="createUpdateDialogData"
        :rules="createUpdateDialogRules"
        ref="createUpdateDialog"
      >
        <el-row>
          <el-col
            :xl="item.block ? 24 : 8"
            :lg="item.block ? 24 : 12"
            :sm="24"
            style="display: flex; flex-flow: row nowrap"
            v-for="(item, index) in createUpdateDialogColumnData"
            :key="index"
            v-show="!item.ifHide"
          >
            <!-- 分块 -->
            <el-button
              style="margin-left: 20px"
              v-if="item.type === 'label'"
              disabled
              size="mini"
              type="info"
            >
              {{ item.label }}
            </el-button>

            <div
              style="
                font-size: 16px;
                margin: 15px 20px;
                background-color: #f2f2f2;
                width: 100%;
                height: 40px;
                line-height: 40px;
                padding: 0 5px;
              "
              v-else-if="item.type === 'div'"
            >
              {{ item.label }}
            </div>
            <!-- 表格 -->
            <div
              class="item-detail seller-box"
              v-else-if="item.type === 'table'"
            >
              <div class="box-title">
                {{ item.tableName }}
                <el-button
                  v-if="item.isCreate"
                  type="primary"
                  size="mini"
                  @click="addCreateShop(item)"
                  >添加</el-button
                >
              </div>
              <el-table
                highlight-current-row
                :data="createUpdateDialogData[item.prop]"
                border
                style="margin: 10px auto 0"
                v-if="!item.hide"
              >
                <el-table-column
                  align="center"
                  type="index"
                  label="序号"
                  fixed="left"
                  width="80"
                ></el-table-column>
                <el-table-column
                  :type="tableItem.type"
                  :prop="tableItem.prop"
                  :label="tableItem.label"
                  v-for="tableItem in item.tableColumn"
                  :width="tableItem.width"
                  :key="tableItem.localId"
                >
                  <template slot-scope="scope">
                    <div v-if="tableItem.editAble">
                      <el-input
                        v-if="tableItem.type === 'input' && tableItem.isNumber"
                        clearable
                        :placeholder="tableItem.placeholder"
                        v-model="
                          createUpdateDialogData[item.prop][scope.$index][
                            tableItem.prop
                          ]
                        "
                        size="mini"
                        :disabled="!item.isCreate"
                        :min="tableItem.min"
                        @input="
                          handelInput(
                            $event,
                            createUpdateDialogData[item.prop][scope.$index],
                            tableItem.prop,
                            tableItem.rule
                          )
                        "
                      ></el-input>
                      <el-input
                        v-else-if="tableItem.type === 'input'"
                        clearable
                        :placeholder="tableItem.placeholder"
                        v-model="
                          createUpdateDialogData[item.prop][scope.$index][
                            tableItem.prop
                          ]
                        "
                        size="mini"
                        :disabled="!item.isCreate"
                        @blur="
                          handelBlur($event, tableItem, scope.$index, item)
                        "
                      ></el-input>
                      <el-select
                        v-else-if="tableItem.type === 'select'"
                        clearable
                        size="mini"
                        filterable
                        v-model="
                          createUpdateDialogData[item.prop][scope.$index][
                            tableItem.prop
                          ]
                        "
                        :placeholder="tableItem.placeholder"
                        @change="
                          dialogChangeSelect(
                            $event,
                            tableItem,
                            scope.$index,
                            item
                          )
                        "
                        :disabled="!item.isCreate"
                      >
                        <el-option
                          v-for="option in tableItem.optionData"
                          :label="
                            option[tableItem.optionDataLabel] || option.value
                          "
                          :value="
                            option[tableItem.optionDataValue] || option.id
                          "
                          :key="option.id"
                        ></el-option>
                      </el-select>
                      <el-image
                        v-else-if="tableItem.type === 'img'"
                        style="width: 30px; height: 30px"
                        :src="
                          createUpdateDialogData[item.prop][scope.$index][
                            tableItem.prop
                          ]
                            ? createUpdateDialogData[item.prop][scope.$index][
                                tableItem.prop
                              ].length > 0
                              ? createUpdateDialogData[item.prop][scope.$index][
                                  tableItem.prop
                                ][0]
                              : ''
                            : ''
                        "
                        :preview-src-list="
                          createUpdateDialogData[item.prop][scope.$index][
                            tableItem.prop
                          ]
                        "
                      ></el-image>
                      <el-date-picker
                        size="mini"
                        v-else-if="tableItem.type === 'date'"
                        clearable
                        :type="tableItem.typeName || 'datetimerange'"
                        @change="
                          changeTableOrderTime(
                            createUpdateDialogData[item.prop][scope.$index][
                              tableItem.prop
                            ],
                            item.prop,
                            scope.$index,
                            tableItem.startTimeName,
                            tableItem.endTimeName
                          )
                        "
                        :value-format="
                          item.valueFormat || 'yyyy-MM-dd HH:mm:ss'
                        "
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-value="tableItem.defaultValue"
                        v-model="
                          createUpdateDialogData[item.prop][scope.$index][
                            tableItem.prop
                          ]
                        "
                        :disabled="tableItem.disabled"
                        :picker-options="tableItem.pickerOptions"
                      ></el-date-picker>
                    </div>
                    <div v-else>{{ scope.row[tableItem.prop] }}</div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="100" v-if="item.isCreate">
                  <template slot-scope="scope">
                    <el-button
                      @click="createTableArrDelete(scope.row, item)"
                      type="text"
                      size="small"
                      >删除</el-button
                    >
                    <el-button
                      @click="createTableArrSave(scope.row)"
                      type="text"
                      size="small"
                      v-if="item.showSave"
                      >保存</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <!-- 表单选项 -->
            <el-form-item
              v-else
              :label="item.label"
              class="el-date-item"
              :prop="item.modelName"
              v-show="!item.hide"
            >
              <!-- el-date-picker -->
              <el-date-picker
                v-if="item.type === 'date'"
                clearable
                :type="item.typeName || 'datetimerange'"
                @change="
                  changeDiaLogOrderTime(
                    item,
                    item.modelName,
                    item.startTimeName,
                    item.endTimeName
                  )
                "
                :value-format="item.valueFormat || 'yyyy-MM-dd HH:mm:ss'"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-value="item.defaultValue"
                v-model="createUpdateDialogData[item.modelName]"
                :disabled="item.disabled"
                :picker-options="item.pickerOptions"
              ></el-date-picker>
              <!-- radioGroup -->
              <el-radio-group
                v-model="createUpdateDialogData[item.modelName]"
                v-else-if="item.type === 'radio'"
              >
                <el-radio
                  v-for="option in item.optionData"
                  :label="option[item.optionDataValue] || option.id"
                  :key="option.id"
                  >{{ option.label }}</el-radio
                >
              </el-radio-group>
              <!-- checkboxGroup 添加商品专用-->
              <el-checkbox-group
                v-else-if="item.type === 'checkboxGroup'"
                v-model="createUpdateDialogData[item.modelName][item.index]"
                @change="dialogChangeSelect($event, item)"
              >
                <el-checkbox
                  v-for="option in item.optionData"
                  :key="option[item.optionDataValue] || option.value"
                  :label="option[item.optionDataValue] || option.value"
                  :disabled="item.disabled"
                ></el-checkbox>
              </el-checkbox-group>
              <!-- upload -->
              <!-- 视频上传 -->
              <template v-else-if="item.type === 'upload' && item.uploadVideo">
                <el-upload
                  class="avatar-uploader"
                  :accept="item.accept || ''"
                  :data="item.data || {}"
                  :action="uploadAction"
                  :limit="item.limit || 15"
                  :show-file-list="item.showFileList || false"
                  :file-list="
                    createUpdateDialogData['videoList'] ||
                      item.fileList ||
                      undefined
                  "
                  :list-type="item.listType || 'text'"
                  :before-upload="handleBeforeUpload"
                  :on-success="
                    (res, file) =>
                      handleAvatarSuccess(res, file, item.modelName)
                  "
                  :on-remove="
                    (file, fileList) =>
                      handleAvatarRemove(file, fileList, item.modelName)
                  "
                  :on-exceed="
                    (file, fileList) =>
                      handleAvatarExceed(file, fileList, item.modelName)
                  "
                >
                  <el-button size="small" type="primary">{{
                    item.title || "点击上传"
                  }}</el-button>
                  <div slot="tip" class="el-upload__tip" v-if="item.tips">
                    {{ item.tips }}
                  </div>
                </el-upload>
                <!-- 播放视频插槽 -->
                <template>
                  <slot name="playVideo" :item="item"></slot>
                </template>
              </template>
              <!-- 图片上传 -->
              <el-upload
                v-else-if="item.type === 'upload' && !item.uploadVideo"
                class="avatar-uploader"
                :accept="item.accept || ''"
                :limit="item.limit || 50"
                :data="item.data || {}"
                :multiple="item.multiple || true"
                :action="uploadAction"
                :list-type="item.listType || 'picture'"
                :file-list="
                  createUpdateDialogData['fileList'] ||
                    item.fileList ||
                    undefined
                "
                :show-file-list="item.showFileList || false"
                :before-upload="handleBeforeUpload"
                :on-success="
                  (res, file) => handleAvatarSuccess(res, file, item.modelName)
                "
                :on-remove="
                  (file, fileList) =>
                    handleAvatarRemove(file, fileList, item.modelName)
                "
                :on-exceed="
                  (file, fileList) =>
                    handleAvatarExceed(file, fileList, item.modelName)
                "
              >
                <!-- <img
                  v-if="createUpdateDialogData[item.modelName]"
                  :src="createUpdateDialogData[item.modelName]"
                  class="avatar"
                /> -->
                <el-button size="small" type="primary">{{
                  item.title || "点击上传"
                }}</el-button>
                <div slot="tip" class="el-upload__tip" v-if="item.tips">
                  {{ item.tips }}
                </div>
              </el-upload>
              <!-- cascader -->
              <el-cascader
                clearable
                v-else-if="item.type === 'cascader'"
                v-model="createUpdateDialogData[item.modelName]"
                :options="item.optionData"
                :props="item.props"
                :collapse-tags="item.collapseTags"
                :show-all-levels="item.showAll"
                @change="dialogChangeSelect($event, item)"
              ></el-cascader>
              <!-- autocomplete -->
              <el-autocomplete
                clearable
                v-else-if="item.type === 'auto-input'"
                class="inline-input"
                v-model="createUpdateDialogData[item.modelName]"
                :fetch-suggestions="
                  (querystring, cb) => querySearchAsync(querystring, cb, item)
                "
                @select="dialogChangeSelect($event, item)"
                placeholder="请输入"
                :disabled="item.disabled"
              ></el-autocomplete>
              <!-- range -->
              <div v-else-if="item.type === 'range'" class="range">
                <el-input
                  clearable
                  :placeholder="item.placeholder"
                  v-model="createUpdateDialogData[item.modelName]"
                ></el-input
                >至
                <el-input
                  clearable
                  :placeholder="item.placeholder"
                  v-model="createUpdateDialogData[item.modelName2]"
                ></el-input
                >元
              </div>
              <!-- calculation -->
              <div v-else-if="item.type === 'calculation'" class="calculation">
                <el-input
                  @input="
                    operationChange(
                      $event,
                      createUpdateDialogData[item.modelName],
                      createUpdateDialogData[item.modelName1],
                      createUpdateDialogData[item.modelName2],
                      item.modelName3
                    )
                  "
                  clearable
                  v-model="createUpdateDialogData[item.modelName]"
                ></el-input>
                <span class="symbol">*</span>
                <el-input
                  clearable
                  @input="
                    operationChange(
                      $event,
                      createUpdateDialogData[item.modelName],
                      createUpdateDialogData[item.modelName1],
                      createUpdateDialogData[item.modelName2],
                      item.modelName3
                    )
                  "
                  v-model="createUpdateDialogData[item.modelName1]"
                ></el-input>
                <span class="symbol">*</span>
                <el-input
                  @input="
                    operationChange(
                      $event,
                      createUpdateDialogData[item.modelName],
                      createUpdateDialogData[item.modelName1],
                      createUpdateDialogData[item.modelName2],
                      item.modelName3
                    )
                  "
                  clearable
                  v-model="createUpdateDialogData[item.modelName2]"
                ></el-input>
                <span class="symbol">=</span>
                <el-input
                  disabled
                  v-model="createUpdateDialogData[item.modelName3]"
                ></el-input>
              </div>
              <!-- input.number -->
              <el-input
                v-else-if="item.type === 'input' && item.isNumber"
                :type="item.isTextArea || 'input'"
                clearable
                :placeholder="item.placeholder"
                v-model="createUpdateDialogData[item.modelName]"
                :disabled="item.disabled"
              >
                <template v-if="item.append" slot="append">{{
                  item.appendText
                }}</template>
              </el-input>
              <!-- input -->
              <el-input
                v-else-if="item.type === 'input'"
                :type="item.isTextArea || 'input'"
                clearable
                autosize
                :placeholder="item.placeholder"
                v-model="createUpdateDialogData[item.modelName]"
                :disabled="item.disabled"
              >
                <template v-if="item.append" slot="append">{{
                  item.appendText
                }}</template>
              </el-input>
              <!-- switch -->
              <el-switch
                v-else-if="item.type === 'switch'"
                v-model="createUpdateDialogData[item.modelName]"
                :active-text="item.activeText"
                :inactive-text="item.inactiveText"
                :active-value="item.activeValue"
                :inactive-value="item.inactiveValue"
                :disabled="item.disabled"
                @change="
                  switchChangeCb(createUpdateDialogData[item.modelName], item)
                "
              ></el-switch>
              <!-- select -->
              <el-select
                v-else-if="item.type === 'select'"
                clearable
                :filterable="item.needFilterable || true"
                v-model="createUpdateDialogData[item.modelName]"
                :placeholder="item.placeholder"
                :multiple="item.multiple"
                @change="dialogChangeSelect($event, item)"
                :disabled="item.disabled"
              >
                <el-option
                  v-for="option in item.optionData"
                  :label="option[item.optionDataLabel] || option.value"
                  :value="option[item.optionDataValue] || option.id"
                  :key="option.id"
                ></el-option>
              </el-select>
              <!-- checkbox -->
              <el-checkbox
                v-model="item.modelName"
                v-else-if="item.type === 'checkbox'"
                >{{ item.text }}</el-checkbox
              >
              <!-- button -->
              <el-button v-else-if="item.type === 'button'">{{
                item.text
              }}</el-button>
              <!-- inputNumber -->
              <el-input-number
                v-else-if="item.type === 'inputNumber'"
                v-model="createUpdateDialogData[item.modelName]"
                @change="dialogChangeSelect($event, item)"
                :min="item.min"
                :max="item.max"
                size="small"
              ></el-input-number>

              <!-- other -->
              <el-input
                v-else-if="item.type === 'other'"
                clearable
                :placeholder="item.placeholder"
                v-model="createUpdateDialogData.otherInput"
                class="input-with-select"
              >
                <el-select
                  clearable
                  v-model="createUpdateDialogData.otherSelect"
                  slot="prepend"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="option in item.optionData"
                    :label="option.value"
                    :value="option.id"
                    :key="option.id"
                  ></el-option>
                </el-select>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col
            :lg="24"
            :md="24"
            :sm="24"
            style="text-align: right; padding-right: 20px"
          >
            <slot name="btn"></slot>
            <el-button type="primary" @click="handelCreateUpdateDialog"
              >确 定</el-button
            >
            <el-button @click="hideCreateUpdateDialog">关 闭</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </el-dialog>
</template>
<script>
import { postAction, getAction } from "@/api/manage";
import { operation, randomNumber } from "@/utils/util";
export default {
  name: "createUpdateDialogCOM",
  data: () => {
    return {
      restaurants: [],
      createUpdateDialogData: {},
      fileList: [],
      tableProp: "" //表格上传参数
    };
  },
  props: {
    title: { type: String },
    uploadAction: { type: String },
    showCreateUpdateDialog: { type: Boolean, default: false },
    createUpdateDialogColumnData: { type: Array, required: true },
    updateDialoData: { type: Object, required: true },
    createUpdateDialogRules: { type: Object, default: {} }
  },
  watch: {
    updateDialoData: {
      handler(newData, oldData) {
        if (JSON.stringify(newData) == "{}") {
          this.createUpdateDialogData = Object.assign({}, newData);
        } else {
          this.createUpdateDialogData = Object.assign(
            {},
            this.createUpdateDialogData,
            newData
          );
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    console.log(this.createUpdateDialogColumnData);
  },
  computed: {},
  methods: {
    handleAvatarSuccess(res, file, modelName) {
      this.$emit("handleAvatarSuccess", res, file, modelName);
    },
    handleAvatarRemove(file, fileList, modelName) {
      this.$emit("handleAvatarRemove", file, fileList, modelName);
    },
    handleAvatarExceed(file, fileList, modelName) {
      this.$emit("handleAvatarExceed", file, fileList, modelName);
    },
    handleBeforeUpload(file) {
      this.$emit("handleBeforeUpload", file);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handelInput(item, obj, prop, rule) {
      console.log(item, obj, prop, rule);
      let o = item.replace(rule);
      this.$set(obj, prop, o);
    },
    handelBlur(e, item, index, tableItem) {
      this.$emit("handelBlur", e, item, index, tableItem);
    },
    // 添加表格行
    addCreateShop(item) {
      this.$emit("addCreateShop", item);
    },
    // 删除表格行
    createTableArrDelete(row, item) {
      this.$emit("createTableArrDelete", row, item);
    },
    // 保存表格行
    createTableArrSave(item) {
      item.sapGoodsNo = this.checkData.sapGoodsNo;
      item.userCreate = this.$store.state.user.realname;

      postAction(this.url.createGoodsSpec, item).then(res => {
        if (res.code != 0) return this.$message.error(res.msg);
        this.$message.success("操作成功！");
      });
    },
    //   业务组件长宽高相乘方法
    operationChange(e, l, w, h, t) {
      this.$set(
        this.createUpdateDialogData,
        t,
        operation(operation(l, w, "multiply"), h, "multiply")
      );
    },
    //   修改时间方法
    changeDiaLogOrderTime(item, model, start, end) {
      if (item && model && start && end) {
        console.log(this.createUpdateDialogData[model]);
        if (
          this.createUpdateDialogData[model] &&
          this.createUpdateDialogData[model].length > 0
        ) {
          this.createUpdateDialogData[start] = this.createUpdateDialogData[
            model
          ][0];
          this.createUpdateDialogData[end] = this.createUpdateDialogData[
            model
          ][1];
        } else {
          this.createUpdateDialogData[start] = "";
          this.createUpdateDialogData[end] = "";
        }
      }
    },
    changeTableOrderTime(obj, modelName, index, startTimeName, endTimeName) {
      this.$emit(
        "changeTableOrderTime",
        obj,
        modelName,
        index,
        startTimeName,
        endTimeName
      );
    },
    // 下拉方法
    dialogChangeSelect(e, item, index, tableItem) {
      this.$emit("dialogChangeSelect", e, item, index, tableItem);
    },
    // 弹窗确定按钮事件
    handelCreateUpdateDialog() {
      console.log(
        "------------确定提交----------------",
        this.createUpdateDialogData
      );
      this.$refs["createUpdateDialog"].validate(valid => {
        if (valid) {
          this.$emit("handelCreateUpdateDialog", this.createUpdateDialogData);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 隐藏弹窗
    hideCreateUpdateDialog() {
      this.createUpdateDialogData = {};
      this.$emit("hideCreateUpdateDialog");
    },
    // 自动匹配下拉输入筛选方法
    querySearchAsync(queryString, cb, item) {
      this.$emit("querySearchAsync", queryString, cb, item);
    },
    clearValidate() {
      this.$nextTick(() => {
        this.$refs.createUpdateDialog.clearValidate();
      });
    },
    // switch按钮change回调方法
    switchChangeCb(currentVal, item) {
      this.$emit("switchChangeCb", currentVal, item);
    }
  }
};
</script>
<style scoped>
.createUpdateDialog-box {
  position: relative;
  border: 1px dashed rgba(0, 0, 0, 0.4);
  padding: 10px 0;
}
.createUpdateDialog-box .el-input,
.createUpdateDialog-box .el-date-editor--datetimerange.el-input,
.createUpdateDialog-box .el-date-editor--datetimerange.el-input__inner,
.createUpdateDialog-box .el-select,
.createUpdateDialog-box .el-autocomplete,
.createUpdateDialog-box .el-cascader,
.createUpdateDialog-box .el-range-editor {
  width: 100%;
}
.range .el-input {
  width: calc((100% - 50px) / 2);
}
.calculation .symbol {
  width: 10px;
  display: inline-block;
  text-align: center;
}
.calculation .el-input {
  width: calc((100% - 30px) / 4);
}
.createUpdateDialog-box >>> .el-date-item .el-form-item__content {
  width: calc(100% - 130px);
}
.createUpdateDialog-box .el-form-item {
  width: 100%;
}

.item-detail >>> .el-form--inline .el-form-item__content {
  width: calc(100% - 130px);
}
.item-detail >>> .el-form-item__label {
  font-weight: bold;
}
.item-detail >>> .el-form-item {
  margin-bottom: 8px;
}
.item-detail {
  width: 98%;
  border: 1px dashed rgba(0, 0, 0, 0.4);
  margin: 30px auto 10px;
  position: relative;
  padding-top: 10px;
}

.item-detail .box-title {
  padding: 0 5px;
  position: absolute;
  font-size: 18px;
  top: -14px;
  left: 10px;
  background-color: #fff;
  font-weight: 600;
  display: inline-block;
}

.avatar-uploader {
  display: inline-block;
}

.avatar-uploader >>> .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader >>> .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}

.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
.video-poster {
  width: 100px;
  height: 100px;
  display: block;
}
.avatar-uploader >>> .el-upload--picture-card {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 80px;
  height: 33px;
  line-height: 30px;
  vertical-align: top;
}
.avatar-uploader >>> .el-upload-list--picture-card .el-upload-list__item {
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  margin: 0 8px 8px 0;
  display: inline-block;
}
</style>
